<template>
  <div class="container">
    <breadcrumbNavigation :title="title"></breadcrumbNavigation>
    <div class="box">
      <div class="box-item" @click="router.push(`/detail?type=collect&name=收集`)">
        <div class="box-item-left">
          <i class="iconfont icon-cbox-full"></i>
          <span>收集</span>
        </div>
        <div>{{ collect }}</div>
      </div>
      <div class="box-item" @click="router.push(`/detail?type=all&name=所有`)">
        <div class="box-item-left">
          <i class="iconfont icon-a-quanbusuoyou-10"></i>
          <span>所有</span>
        </div>
        <div>{{ sum }}</div>
      </div>
      <div class="box-item" @click="router.push(`/detail?type=favor&name=星标`)">
        <div class="box-item-left">
          <i class="iconfont icon-xingxing"></i>
          <span>星标</span>
        </div>
        <div>{{ favor }}</div>
      </div>
      <div class="box-item" @click="router.push(`/detail?type=tody&name=今天`)">
        <div class="box-item-left">
          <i class="iconfont icon-jintiandianjihou"></i>
          <span>今天</span>
        </div>
        <div>{{ today }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 作者：YCH
// 时间：2022年10月30日 10:20:32
import { ref } from 'vue';
import BreadcrumbNavigation from '@/components/breadcrumbNavigation/index.vue';
import { useRouter } from 'vue-router';
const props = defineProps({
  collect: {
    type: Number,
    default: 0,
  },
  sum: {
    type: Number,
    default: 0,
  },
  favor: {
    type: Number,
    default: 0,
  },
  today: {
    type: Number,
    default: 0,
  },
});
const router = useRouter();
let title = ref('百宝箱');
</script>

<style lang="less" scoped>
.container {
  font-family: var(--primary-font-family);
  font-weight: var(--primary-font-weight);
  .box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .box-item {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 170px;
    height: 60px;
    margin-top: 10px;
    border-radius: 14px;
    background: #fff;
    .box-item-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  }
  .box-item:nth-child(1) .box-item-left i{
    color: #f12711;
  }
  .box-item:nth-child(2) .box-item-left i{
    color: #fc4a1a;
  }
  .box-item:nth-child(3) .box-item-left i{
    color: #f7b733;
  }
  .box-item:nth-child(4) .box-item-left i{
    color: blueviolet;
  }
}
</style>
